<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.Map" %>
<%@ page import="org.gnomus.server.C" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.Collections" %>
<%@ page import="java.util.Comparator" %>
<%@ page import="org.gnomus.data.lesson" %>
<%@ page import="org.gnomus.data.item" %>
<%
  Context ctx = Context.get();
  lesson lsn = (lesson) ctx.data.get("lesson");
  List<item> items = lsn.getItems();
  if (lsn == null) {
%>
Lesson not found.
<%
  } else {
    if (items != null) {
      Collections.sort(items, new Comparator<item>() {
        public int compare(item i1, item i2) {
          Integer o1 = Integer.parseInt(i1.getOrder());
          Integer o2 = Integer.parseInt(i2.getOrder());
          return o1.compareTo(o2);
        }
      });
    }
%>
<script type="text/javascript">
  var lesson = { items : [] };
  $(document).ready(function() {
    tinyMCE.init({
      mode : "exact",
      theme : "simple",
      elements : "text",
      handle_event_callback : "lesson.items.current.showSaveTextButton",
      oninit : function() {
        lesson = new Lesson(<%= new Gson().toJson(lsn) %>);
        lesson.edit();
      }
    });
  });
</script>
<div class="lesson-title" style="padding-bottom: 8px;">
  <span class="xlarge b" onclick="window.location.hash='#index';lesson.edit()">
    <%= C.LESSON_TOPICS.get(lsn.get("subject")) + " : " + lsn.get("title") %>
  </span>
  <a class="small" onclick="lesson.editTitle()">
    edit
  </a>
  <div class="p-absolute" style="top:16px; right:32px;">
    <a onclick="window.location = window.location.href.replace('admin/edit_lesson', 'learn/lesson')" class="large">
      play
    </a>
    |
    <a href="/admin/export_lesson?id=<%= lsn.get("id")%>" class="large">
      json
    </a>
  </div>
</div>
<div id="index" class="f-left border-1" style="width:560px; min-height: 200px; padding: 8px;">
  <p class="b">
    Items
  </p>
  <table style="width:100%;">
  <%
    if (items == null || items.size() == 0) {
  %>
    <tr>
      <td>
        No items found.
      </td>
    </tr>
  <%
    } else {
      for (item itm : items) {
  %>
    <tr>
      <td>
        <%= items.indexOf(itm) + 1 %>.
        <a onclick="window.location.hash = '<%= itm.get("id") %>'; lesson.edit();">
        <%= itm.getTitle() %>
        </a>
      </td>
      <td>
        <a onclick="lesson.removeItem('<%= itm.get("id")%>');">remove</a>
      </td>
    </tr>
  <%
      }
    }
  %>
  </table>
</div>
<div id="create_item" class="f-right border-1" style="width:300px; padding: 8px;">
  <p class="large b">
    Create item
  </p>
  <form action="/admin/create_item?id=<%= lsn.get("id") %>" method="post">
    <table>
      <tr>
        <td class="a-right">
          <label for="name">Title:</label>
        </td>
        <td colspan=2>
          <input type="text" name="title" />
        </td>
      </tr>
      <tr>
        <td class="a-right">
          <label for="type">Type:</label>
        </td>
        <td>
          <select style="width:100%" name="type">
            <%
              for (Map.Entry me : C.LESSON_ITEM_TYPES.entrySet()) {
            %>
            <option value="<%= me.getKey() %>">
              <%= me.getValue() %>
            </option>
            <%
              }
            %>
          </select>
        </td>
        <td class="a-right">
          <input type="submit" value="Create"/>
          <input type="hidden" name="order" value="<%= items.size() == 0 ? 1 : (items.get(items.size() - 1).getOrder() + 1) %>"/>
        </td>
      </tr>
    </table>
  </form>
</div>
<div id="item" class="d-none">
  <div class="border-1" style="padding: 8px;">
    <div id="title" style='margin-bottom: 8px; width:100%;'>
      <span></span>
      <a class="small" onclick="lesson.items.current.editTitle()">edit</a>
    </div>
    <div id="text" style="width:100%; height:240px;">
      <form></form>
    </div>
    <div id="save_text" class="d-none a-right">
      <a onclick="lesson.items.current.saveText(tinymce.get('text').getContent());">Save changes</a>
    </div>
    <div class="content a-center"></div>
  </div>
  <div class="options border-1" style="padding: 8px; margin-top: 8px; margin-bottom:80px;"></div>
</div>
<div class="clear"></div>
<%
  }
%>